<template>
	<view class="lay-root">
		<v-table ref="vTableRef" class="table-lay" :columns="headData" :list="contentData" :height="tableHeight"
			:td-height="40" :th-td-height="40"
			selection="single" @on-selection-change="onSelectionChange" :row-class-name="rowClassNameFn"
			:slot-cols="['isp_date','this_thck','temperature', 'corrvalue']">
			<template v-slot="{ row ,rowKey }">
				<view :style="genCellStyle(row, rowKey)">{{row[rowKey]}}</view>
			</template>
		</v-table>
	</view>
</template>

<script>
	import vTable from "@/components/table.vue";
	export default {
		watch: {
			tableHeight(val) {
				console.log(val)
			}
		},

		props: {
			tableHeight: {
				type: Number,
			},

			showType: {
				type: Number,
				default: 0
			},

			headData: {
				type: Array,
				default: () => {
					return [];
				}
			},
			contentData: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},

		components: {
			vTable
		},

		data() {
			return {
				data: [{
						name: 'John Brown',
						age: 18,
						address: 'New York No. 1 Lake Park',
						id: "1",

					},
					{
						name: 'Jim Green',
						age: 25,
						address: 'London No. 1 Lake Park',
						id: "2"
					},
					{
						name: 'Joe Black',
						age: 30,
						address: 'Sydney No. 1 Lake Park',
						id: "3"
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park',
						id: "4"
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park',
						id: "5"
					},

					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park',
						id: "6"
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park',
						id: "7"
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park',
						id: "8"
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park',
						id: "9"
					}
				],
				//自定义列样式
				columns: [{
						title: "ID",
						key: "id"
					},
					{
						title: 'Name',
						key: 'name'
					},
					{
						title: 'Age',
						key: 'age'
					},
					{
						title: 'Address',
						key: 'address'
					}
				],
			}
		},

		mounted() {

		},

		computed: {
			checkTableShowColum(inType) {
				if (inType.indexOf(this.showType) == -1)
					return true;
				return false;
			}
		},

		methods: {
			genCellStyle(inData , inKey) {
				let tempBackColor = "rgba(255,255,0,0.1)";
				
				let tempThisThck = inData.this_thck;
				let tempCorrvalue = inData.corrvalue;
				let tempChkUseTmprCrct= getApp().globalData.thickSetting.ChkUseTmprCrct;
				
				if(inKey == "this_thck") {
					if(tempThisThck != "NA" && Number(tempThisThck) > 0 && (tempCorrvalue == "" || !tempChkUseTmprCrct) )
						tempBackColor = 'rgba(255,0,0,0.7)'
				} else if(inKey == "corrvalue") {
					if(tempCorrvalue != "" && tempChkUseTmprCrct )
						tempBackColor = 'rgba(255,0,0,0.7)'
				}
				
				let re = `display:flex;flex-direction: row;justify-content: center;align-items: center;width:100%;height:100%;`;
				re += `font-size: 14px;background-color:${tempBackColor};`;
				re += `color:#000;`
				return  re;
			},
			
			onSecondClick() {
				// 	this.secondShowType++;
				// 	if (this.secondShowType > 1)
				// 		this.secondShowType = 0;
			},

			rowClassNameFn(row, index) {
				// if (index % 2 == 0) {
				// 	return 'table-row-singular';
				// } else {
				// 	return 'table-row-double';
				// }
				return '';
			},

			onSelectionChange(e) {
				console.log("onTableSelect");
				console.log(e);
				this.$emit("onSelectionChange", e.new.item)
			},

			setSingleSelectDataIndex(inI) {
				this.$refs.vTableRef.setSingleSelectData(inI);
			}
		}
	}
</script>

<style lang="scss">
	.lay-root {
		background-color: #fff;
	}

	.table-lay {
		// height: 100%;
	}

	.table-row-singular {
		font-size: 20upx;
		font-weight: normal;
		border: none;
		padding: 10upx;
		background-color: #0ffff0;
	}

	.table-row-double {
		font-size: 20upx;
		font-weight: normal;
		border: none;
		padding: 10upx;
		background-color: #0ff00f;
	}
</style>
